<template>
	<view id="app">
		<!-- 头部 -->
		<!-- 轮播图容器 -->
		<swiper class="carousel" autoplay="true" circular="true" indicator-active-color="#fff" indicator-color="#000">
			<!-- 第一项轮播图 -->
			<swiper-item class="swipers" v-for="(img,i) in imgs">
				<image :src="'../../static/image/'+img">
				</image>
			</swiper-item>
		</swiper>
		<!-- 轮播图上的价格 -->
		<view class="swiper-price"> ￥{{villainfo[0].villa_price}}/晚起 </view>
		<!-- 设施 -->
		<view class="facility">
			<!-- 床数 -->
			<view class="facility-flex">
				<image style="margin-left: 30rpx;" src="../../../static/image/index/icon/ico_6.svg" mode=""></image>
				<view class="facility-text">{{villainfo[0].villa_rooms}}卧室</view>
			</view>
			<!-- 浴缸 -->
			<view class="facility-flex">
				<image style="margin-left: 10rpx;" src="../../../static/image/index/icon/ico_7.svg" mode=""></image>
				<view class="facility-text">{{villainfo[0].villa_baths}}浴室</view>
			</view>
			<!-- 游泳池 -->
			<view class="facility-flex">
				<image style="margin-left: 10rpx;" src="../../../static/image/index/icon/ico_8.svg" mode=""></image>
				<view class="facility-text">{{villainfo[0].villa_swmins}}泳池</view>
			</view>
			<!-- 人数 -->
			<view class="facility-flex">
				<image style="margin-left: 30rpx;" src="../../../static/image/index/icon/ico_9.svg" mode=""></image>
				<view class="facility-text">{{villainfo[0].villa_rooms*2}}人</view>
			</view>
		</view>
		<!-- 主题-->
		<view class="theme"> 经典&nbsp;|&nbsp;家庭&nbsp;|&nbsp;海景 </view>
		<!-- 评论 -->
		<!-- <view class="comment">
			<view class="comment-head">
				<view class="chone">
					<image src="../../static/image/commodity/pingfen.svg" mode=""></image>
					<text>评分{{comment}}</text>
				</view>
				<view class="chone">
					<image src="../../static/image/commodity/pinglun.svg" mode=""></image>
					<text>评论5</text>
				</view>
			</view>
			<view class="comment-text">
				<view class="ct-head">
					<image src="https://statics.dujiabieshu.com/uploads/headimg/3de5c781ed9f98c3090919aaf4ac556d.jpg"
						mode=""></image>
					<view class="ct-info">
						<text class="ct-name">吴志辉</text>
						<text class="ct-date">2020-12-10 16:42:21</text>
					</view>
				</view>
				<view class="ct-text">
					<text>
						9月14一18日，我和先生在库恩举行婚礼，一行人总共13大1小。先说好的方面：库恩庄非闫大，足够大家呆上好几天不厍下山也不觉得无，各种娱乐设施；管家的服务非闫好，好到能为宝宝吃饭；庄非闫漂亮，地中海风格，海景山景一流，和条片没有差异；举行婚礼比较有经验，能满足基丕需求；最好的是中邑的中介Chns服务菲常好！有任何问题简直就是24小时随时回过我。
					</text>
					<button>查看更多</button>
				</view>
			</view>
		</view> -->
		<!-- 别墅简介 -->
		<view class="synopsis">
			<view class="synopsis-title">别墅简介</view>
			<view class="synopsis-text">
				库恩庄别墅坐落于苏悔岛青幸延的山發之上，于此俯瞰秀美的查汶海湾(ChawengBay)，仿佛置巪于地中海出启所，定会让您流连忘返。汶里业洲和欧洲风格兼容并茁，为您营造完美和讠皆的度假氛围。别墅依地势而建，厍精美岩石点缀的建筑与周围的自然环境为一体，浑然天成。天然的大型鹅卵石、假山庭、茵
			</view>
			<button class="view_more">查看更多</button>

		</view>
		<!-- 设施&服务 -->
		<view class="facility-serve">
			<view class="synopsis-title">设施&服务</view>
			<view class="fs-text">免费服务：早餐女佣机场接送私人厨师客房服务礼宾服务</view>
			<view class="fs-text">付费服务：私人司机与车辆租车服务</view>
			<view class="fs-text">别墅设施：拖鞋吹风机空调室内淋浴音响衣柜&nbsp;iPod/Pooc连接基座阳光躺椅与遮阳伞室外淋浴桌球台</view>
			<view class="fs-text">综合设施：免费W五泳池厨房餐厅花园户外用餐区露台客厅</view>
			<view class="fs-text">活动设施：水疗乓按摩尔夫飞镖靶地掷球</view>
		</view>
		<!-- 费用与条款 -->
		<view class="cost">
			<view class="synopsis-title">费用&条款</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">税费：</view>
				<view class="synopsis-text-right">7%</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">服务费：</view>
				<view class="synopsis-text-right">10%</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">成人加床费：</view>
				<view class="synopsis-text-right">￥341</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">成人最大加床数：</view>
				<view class="synopsis-text-right">0</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">儿童加床费：</view>
				<view class="synopsis-text-right">￥341</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">儿童最大加床数：</view>
				<view class="synopsis-text-right">0</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">押金：</view>
				<view class="synopsis-text-right">￥2000</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">儿童条款：</view>
				<view class="synopsis-text-right-examine">查看</view>
			</view>
			<view class="synopsis-texts">
				<view class="synopsis-text-left">取消与预订条款：</view>
				<view class="synopsis-text-right-examine">查看</view>
			</view>
		</view>

		<!-- 相似房源 -->
		<view class="synopsis-title" style="line-height: 120rpx;">相似房源</view>
		<scroll-view class="hot_dest" style="height: 580rpx;" scroll-x>
			<view class="housing" v-for="(h,i) in housing">
				<img :src="h.img" alt="">
				<view class="housing-name">{{ h.name }}</view>
				<view class="housing-facility">{{ h.bedroom }}卧室，{{ h.shower }}浴室，{{ h.swimming }}泳池</view>
			</view>
		</scroll-view>

		<!-- 底部 -->
		<view class="bottom">
			<view class="bottom-left">
				<image src="../../static/image/kefu.svg" mode=""></image>
				<view class="bl-text">在线客服</view>
			</view>
			<view class="bottom-left" @click="ClickPhone()">
				<image src="../../static/image/dianhua.svg" mode=""></image>
				<view class="bl-text">客服热线</view>
			</view>
			<button class="bottom-right" open-type="share">
				<image src="../../static/image/tupian.svg"></image>
				<text>一键分享</text>
			</button>
			<view class="bottom-right" style="background: #ff8000;">
				<text>立即预订</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/static/js/api.js"
	export default {
		data() {
			return {
				villainfo: {},
				comment: [],
				villa_name: "",
				villa_id: "",
				imgs: [],
				// 相似房源
				housing: [{
						img: "https://image03.dujiabieshu.com/uploads/destination/article/2/2930/mobile.37.jpg",
						name: "密斯卡湾西拉别墅泰国，苏梅岛",
						bedroom: "5-7",
						shower: "8",
						swimming: "1"
					},
					{
						img: "https://image02.dujiabieshu.com/uploads/destination/article/5/5449/mobile.21.jpg",
						name: "天幕别墅泰国,苏梅岛",
						bedroom: "6-8",
						shower: "10",
						swimming: "1"
					},
					{
						img: "https://image03.dujiabieshu.com/uploads/destination/article/1/1302/mobile.6.jpg",
						name: "瑞瓦别墅泰国，苏梅岛",
						bedroom: "3-7",
						shower: "7",
						swimming: "1"
					},
					{
						img: "https://image02.dujiabieshu.com/uploads/destination/article/1/1557/mobile.1.jpg",
						name: "密斯卡湾莲花别墅泰国，苏梅岛",
						bedroom: "5-8",
						shower: "10",
						swimming: "1"
					},
					{
						img: "https://image03.dujiabieshu.com/uploads/destination/article/1/1298/mobile.52.jpg",
						name: "玛露娜别墅泰国,苏梅岛",
						bedroom: "4-6",
						shower: "6",
						swimming: "1"
					}
				]
			}
		},
		onLoad: function(option) {
			if (option.villa_name != undefined) {
				this.villa_name = option.villa_name
				console.log(this.villa_name)
			}
			if (option.villa_id != undefined) {
				this.villa_id = option.villa_id
				console.log(this.villa_id)
			}
			this.VillaInfo();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的menus菜单,可选好友，朋友圈
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		methods: {
			ClickPhone() {
				wx.makePhoneCall({
					phoneNumber: "13097010470" //仅为示例，并非真实的电话号码
				})
			},
			VillaInfo() {
				wx.request({
						url: api.api + '/VillaInfo/selectVillaInfo', // 仅为示例，并非真实的接口地址
						method: 'get',
						data: {
							name: this.villa_name
						},
						header: {

						},
						success: res => {
							this.villainfo = res.data.data.list;
							console.log(res.data.data.list);
							this.imgs = this.villainfo[0].villa_img.split(',');
							console.log(this.imgs);
						}
					}),
					wx.request({
						url: api.api + '/Comment/findCommentByVillaid/' + this.villa_id, // 仅为示例，并非真实的接口地址
						method: 'get',
						data: {

						},
						header: {

						},
						success: res => {
							this.comment = res.data.length;
							console.log(this.comment);
						}
					})
			},
		},
		onShareAppMessage:(res)=> {
			if (res.from === 'button') {
				console.log(res.target)
			}
			return {
				title: "漆木别墅", //分享标题
				path: '../../../commodity/pages/commodity_detail/commodity_detail', //分享的页面路径
				mpId: 'wxb104bc1a12b9d850' //AppId
			}
		},
		onShareTimeline:(res)=> {
		    return {
		      title: "漆木别墅", //分享标题
		      path: '../../../commodity/pages/commodity_detail/commodity_detail',//分享的页面路径
			  imageUrl: "https://s1.ax1x.com/2022/09/17/xpK1j1.jpg",//图片
		    }
		},

	}
</script>

<style>
	@import url(../../static/css/commodity_details.css);
</style>
